<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:800px;
            height:600px;
            position: relative;
            margin: 100px auto;
            background:#000000;
            border:2px solid red;
            overflow: hidden;
        }
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    function FireWork(){
        this.box = document.querySelector('#box')
        this.bindEvent();
    }
    FireWork.prototype.bindEvent = function(){
        var self = this;
        self.box.onclick = function(eve){
            var e = eve || window.event;
            var firework = self.createFireWork();
            firework.style.left = eve.offsetX + 'px';
            $(firework).animate({
                top:eve.offsetY
            },800,function(){
                firework.remove();
            })
        }

    }
    FireWork.prototype.createFireWork = function(){
        var div = document.createElement('div')
        div.className = 'ball';
        div.style.backgroundColor = '#' + Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0')
        this.box.appendChild(div);
        return div
    }
    var fn = new FireWork();

</script>
</html>